<template>
  <div class="myCorTec">
    <el-button type="primary" icon="el-icon-plus" class="addNewCor" @click="addNewCor">添加</el-button>
    <el-popover
      placement="right"
      ref="popverRef"
      trigger="click">
      <div style="height: 30px;display:inline;">
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程名
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年级
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上课时间
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在省
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程信息
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最大容纳人数
        </h3>
      </div>
      <div>
        <el-input v-model="corName" placeholder="课程名" style="width: 160px"></el-input>
        <el-select class="" v-model="corLevel" placeholder="年级" style="width: 180px">
          <el-option
            v-for="item in eLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="corWeek" placeholder="上课时间" style="width: 120px">
          <el-option
            v-for="item in Week"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="corTime" style="width: 120px">
          <el-option
            v-for="item in Time"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-select v-model="corLoc" placeholder="所在省" style="width: 120px">
          <el-option
            v-for="item in City"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="corInfo" placeholder="课程信息" style="width: 200px"></el-input>
        <el-input v-model="corMax_num" placeholder="最大容纳人数" style="width: 180px"></el-input>

        <el-button type="success" round @click="subCor">提 交</el-button>
        <el-button type="primary" round @click="closePop">关 闭</el-button>
      </div>
    </el-popover>
    <el-popover
      placement="right"
      ref="updateRef"
      trigger="click">
      <div style="height: 30px;display:inline;">
        <h3>&nbsp;&nbsp;课程ID
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程名
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年级
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上课时间
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在省
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;课程信息
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最大容纳人数
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;目前课程人数
        </h3>
      </div>
      <div>
        <el-input v-model="createID" placeholder="课程ID" style="width: 120px" disabled></el-input>
        <el-input v-model="createName" placeholder="课程名" style="width: 120px"></el-input>
        <el-select class="" v-model="createLevel" placeholder="年级" style="width: 80px">
          <el-option
            v-for="item in eLevel"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="createWeek" placeholder="上课时间" style="width: 120px">
          <el-option
            v-for="item in Week"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="createTime" style="width: 110px">
          <el-option
            v-for="item in Time"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-select v-model="createLoc" placeholder="所在省" style="width: 90px">
          <el-option
            v-for="item in City"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="createInfo" placeholder="课程信息" style="width: 200px"></el-input>
        <el-input v-model="createMax_num" placeholder="最大容纳人数" style="width: 120px"></el-input>
        <el-input v-model="createNow_num" placeholder="目前课程人数" style="width: 120px" disabled></el-input>

        <el-button type="success" round @click="updateCor">提 交</el-button>
        <el-button type="primary" round @click="closeUpdate">关 闭</el-button>
      </div>
    </el-popover>
    <el-table
      :data="Course"
      height="100%"
      border
      style="width: 100%;top: 40px">
      <el-table-column
        prop="id"
        label="课程id"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="课程名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="level"
        label="年级"
        width="100">
      </el-table-column>
      <el-table-column
        prop="week"
        label="上课时间"
        width="100">
      </el-table-column>
      <el-table-column
        prop="time"
        width="100">
      </el-table-column>
      <el-table-column
        prop="time_class"
        label="课程时长"
        width="100">
      </el-table-column>
      <el-table-column
        prop="loc"
        label="所在省"
        width="100">
      </el-table-column>
      <el-table-column
        prop="info"
        label="课 程 信 息"
        width="200">
      </el-table-column>
      <el-table-column
        prop="max_num"
        label="最大容纳人数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="now_num"
        label="目前课程人数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="allow"
        label="课程状态"
        width="90">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="update(scope.$index,scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteCor(scope.$index,scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods:{
    deleteCor(index,row){
      let _this=this
      if(row.now_num==0)
      {
        this.$axios({
          method:"GET",
          url:"http://localhost/course/deleteCor/"+row.id
        }).then(result => {
           _this.action()
        })
      }
      else{
        this.$axios({
          method:"GET",
          url:"http://localhost/course/deleteReq/"+row.id
        }).then(result => {
          _this.action()
        })
      }

    },

    updateCor(){
       let _this=this
       this.$axios({
         method:"PUT",
         url:"http://localhost/course/update",
         data:{
            id:_this.createID,
           name:_this.createName,
           level:_this.createLevel,
           week:_this.createWeek,
           time:_this.createTime,
           loc:_this.createLoc,
           info:_this.createInfo,
           max_num:_this.createMax_num
         }
       }).then(result => {
         this.$message({
           message: '提交成功！',
           type: 'success'
         });
         this.closeUpdate();
         this.action();
       })

    },
    closeUpdate(){
      this.$refs.updateRef.doClose();
    },


    subCor(){
      if(this.corTime!='' && this.corTime!='' &&this.corInfo!='' &&this.corLoc!='' &&this.corLevel!='' &&this.corName!='' &&this.corMax_num!='')
      {
        let _this=this
        this.$axios({
          method:"GET",
          url:"http://localhost/course/checkTime/"+_this.tid+"/"+_this.corWeek+"/"+_this.corTime
        }).then(result => {
          if(result.data=='ok')
          {
            this.$axios({
              method:"GET",
              url:"http://localhost/teacher/findByUsername/"+_this.username
            }).then(response => {

              _this.$axios({
                method:"POST",
                url:"http://localhost/course/save",
                data:{
                  name:_this.corName,
                  level:_this.corLevel,
                  week:_this.corWeek,
                  time:_this.corTime,
                  loc:_this.corLoc,
                  info:_this.corInfo,
                  tid:response.data.id,
                  tname:response.data.name,
                  max_num:_this.corMax_num
                }
              }).then(response => {
                this.$message({
                  message: '申请已成功提交！',
                  type: 'success'
                });

                this.$refs.popverRef.doClose();
                this.action()

              })
            })
          }
          if(result.data=='err'){
            this.$message({
              message: '课程时间冲突！',
              type: 'warning'
            });
          }

        })
      }
     else{
        this.$message({
          message: '输入不能为空！',
          type: 'warning'
        });
      }

    },

    addNewCor(){
      this.$refs.popverRef.doShow();
    },
    closePop(){
      this.$refs.popverRef.doClose();
    },
    update(index,row){
      this.createID=row.id;
      this.createInfo=row.info;
      this.createLevel=row.level;
      this.createLoc=row.loc;
      this.createMax_num=row.max_num;
      this.createName=row.name;
      this.createTime=row.time;
      this.createWeek=row.week;
      this.createNow_num=row.now_num;
      this.$refs.updateRef.doShow();
    },
    action(){
      this.findMyCor()
    },
    findMyCor(){
      let _this=this
      this.$axios({
        method:"GET",
        url:"http://localhost/teacher/findByUsername/"+_this.username
      }).then(response => {
        _this.tid=response.data.id;
        _this.$axios({
          method:"GET",
          url:"http://localhost/course/findTecCor/"+response.data.id
        }).then(response => {
          _this.Course=response.data
        })
      })
    },
  },
  mounted() {
    this.username=this.$route.query.username
    this.action()
  },
  data() {
    return {
      corName:'',
      corLoc:'',
      corLevel:'',
      corWeek:'',
      corTime:'',
      corInfo:'',
      corMax_num:'',

      createID:"",
      createName:'',
      createLoc:'',
      createLevel:'',
      createWeek:'',
      createTime:'',
      createInfo:'',
      createMax_num:'',
      createNow_num:'',

      Course:[],
      username:'',
      tid:'',
      status:'ok',

      eLevel: [{
        value: '小学',
        label: '小学'
      },
        {
          value: '初中',
          label: '初中'
        },
        {
          value: '高中',
          label: '高中'
        },
        {
          value: '本科',
          label: '本科'
        },
        {
          value: '硕士',
          label: '硕士'
        },
        {
          value: '博士',
          label: '博士'
        }],

      Week:[{
        value:'周一',
        label:'周一'
      },{
        value:'周二',
        label:'周二'
      },{
        value:'周三',
        label:'周三'
      },{
        value:'周四',
        label:'周四'
      },{
        value:'周五',
        label:'周五'
      },{
        value:'周六',
        label:'周六'
      },{
        value:'周日',
        label:'周日'
      },],

      Time:[{
        value:'8:00-9:00',
        label:'8:00-9:00'
      },{
        value:'10:00-11:00',
        label:'10:00-11:00'
      },
        {
          value:'13:00-14:00',
          label:'13:00-14:00'
        },
        {
          value:'15:00-16:00',
          label:'15:00-16:00'
        },
        {
          value:'19:00-20:00',
          label:'19:00-20:00'
        },],
      City:[{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '江苏',
        label: '江苏'
      }, {
        value: '四川',
        label: '四川'
      }, {
        value: '深圳',
        label: '深圳'
      }, {
        value: '广东',
        label: '广东'
      }, {
        value: '天津',
        label: '天津'
      }, {
        value: '河北',
        label: '河北'
      }, {
        value: '福建',
        label: '福建'
      }, {
        value: '山东',
        label: '山东'
      },
      ]
    }
  },
}
</script>

<style scoped>
.myCorTec{
  position: absolute;
  left: 30px;
  width: 100%;
  height: 700px;
  background-color: white;
}

.addNewCor{
  position: absolute;
  right: 1240px;
  z-index: 1000;
}
</style>
